<template>
  <!--  数据可视化页面-->
  <div :class="isControl?'board_project':'board'">
    <audio ref="audioRef" src="./imgs/warring.mp3" preload="auto" autoplay></audio>
    <!-- 标题 -->
    <div :class="isControl?'board_project_header':'board_header'">
      <div v-if="!isControl"
           style="width:200px;height:40px;float: left;margin-top: -30px;color: deepskyblue;position: absolute;">
      </div>
      <el-button type="text" @click="isControl?'':back">{{isControl?projectName :'自动化监测数据可视化'}}
      </el-button>
    </div>

    <!-- 筛选模块 -->
    <!-- 筛选模块 -->
    <module-filter
      v-if="!isControl"
      :roadId.sync="roadId"
      :slopeId.sync="slopeId"
      :projectId.sync="projectId"
      :deptTreeId.sync="deptTreeId"
      @changeRoad="changeRoad">
    </module-filter>

    <!-- 各模块页面加载 ，添加Keep-alive后页面样式会丢失-->
    <!--    <keep-alive>-->
    <router-view class="board_router" ref="currentPage" ></router-view>
    <!--    </keep-alive>-->
  </div>
</template>

<script>
  import ModuleFilter from './modules/filter.vue'
  import {
    borderBox8,
    borderBox1,
    borderBox9,
    borderBox10,
    borderBox11,
    borderBox13,
    scrollBoard,
    decoration10,
    decoration11,
    scrollRankingBoard,
    decoration1,
    decoration3,
    decoration12,
    capsuleChart,
    decoration2,
    decoration7,
    conicalColumnChart,
    loading
  } from '@jiaminghi/data-view'
  import Vue from 'vue'
  import {actions, store} from "../../monitor/work-point.store";

  Vue.use(loading)
  Vue.use(borderBox13)
  Vue.use(borderBox8)
  Vue.use(borderBox1)
  Vue.use(borderBox9)
  Vue.use(capsuleChart)
  Vue.use(borderBox10)
  Vue.use(borderBox11)
  Vue.use(scrollBoard)
  Vue.use(decoration10)
  Vue.use(decoration11)
  Vue.use(scrollRankingBoard)
  Vue.use(decoration1)
  Vue.use(decoration3)
  Vue.use(decoration2)
  Vue.use(decoration12)
  Vue.use(decoration7)
  Vue.use(conicalColumnChart)

  export default {
    components: {ModuleFilter},
    data() {
      return {
        countWarn: [],
        key: 1,
        // 选择路线
        roadId: '',
        // 选择标段
        deptTreeId: '',
        // 选择边坡
        slopeId: '',
        //  选择项目
        projectId: '',
        //  预警等级
        warningLevel: '',
      }
    },
    computed: {
      projectName() {
        return store.projectInfo.name
      },
      isControl() {
        if (this.$route.params.projectId) {
          return true
        }
        return false
      }
    },
    methods: {
      connectSocket() {
        let that = this
        if ('WebSocket' in window) {
          // 打开一个 web socket
          this.ws = new WebSocket(`ws://8.134.54.223:10000/webSocket/warning`)
          this.ws.onopen = function () {
            console.log('websocket 连接上')
          }
          // 连接
          this.ws.onmessage = (evt) => {
            let mes = JSON.parse(evt.data)
            //选了项目就之推送项目相关的预警
            if (that.projectId){
              if(mes.id === that.projectId){
                that.$refs.audioRef.play();
                this.$alert(`${mes.message}`, '警告', {
                  confirmButtonText: '确定',
                });
              }
            }else{
              that.$refs.audioRef.play();
              this.$alert(`${mes.message}`, '警告', {
                confirmButtonText: '确定',
              });
            }
          }
          this.ws.onerror = function (err) {
          }
        } else {
          // 浏览器不支持 WebSocket
          Message({
            type: 'warning',
            message: '您的浏览器不支持 WebSocket!'
          })
        }
      },
      open() {
        let that = this
        this.$alert('将自动接受预警消息,点击确认后会播发预警消息声音示范，请忽略。', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            that.$refs.audioRef.play();
          }
        });
      },
      getShopCode(value) {
        this.warningLevel = ''
        this.warningLevel = value
      },
      changeRoad() {
        this.$refs.currentPage.refresh(this.projectId)
      },
      back() {
        this.$router.replace('/')
      },

    },
    mounted() {
        // this.connectSocket()
        // this.open()
      //项目控制台不执行mounted，执行activated
      // if (this.$route.query.cityName) {
      //   this.$refs.map.refresh(this.projectId, this.warningLevel,this.$route.query.cityName)
      // }
    }, activated() {
      // 查询项目信息

    }
  }
</script>

<style lang="less" scoped>
  //项目控制台
  .board_project {
    background-color: #ffffff;
    margin-top: 9px;
    overflow: hidden;

    .board_page {
      height: calc(100vh - 2px);
    }

    .board_project_header {
      background-color: #1b1b1b;
      width: 100%;
      /*position: absolute;*/
      top: 0;
      left: 0;
      z-index: 1;
      height: 3.375rem /* 102/16 */;
      background-image: url('./imgs/header.png');
      background-size: 100% 100%;
      text-align: center;
      padding-top: 0.5375rem /* 23/16 */;

      & > em, .el-button {
        font-weight: 600;
        font-size: 1.75rem /* 44/16 */;
        line-height: 1.875rem /* 62/16 */;
        background-image: -webkit-linear-gradient(bottom, rgba(130, 168, 242, 1), rgba(255, 255, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .board {
    position: relative;
    width: 100vw;


    .board_header {
      background-color: #1b1b1b;
      width: 100%;
      /*position: absolute;*/
      top: 0;
      left: 0;
      z-index: 1;
      height: 3.375rem /* 102/16 */;
      background-image: url('./imgs/header.png');
      background-size: 100% 100%;
      text-align: center;
      padding-top: 0.5375rem /* 23/16 */;

      & > em, .el-button {
        font-weight: 600;
        font-size: 1.75rem /* 44/16 */;
        line-height: 1.875rem /* 62/16 */;
        background-image: -webkit-linear-gradient(bottom, rgba(130, 168, 242, 1), rgba(255, 255, 255, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }


  }
</style>


<style lang="less" scoped>


  .board_page-left-d {
    width: 4rem /* 200/16 */;
    height: 1rem /* 50/16 */;
    position: absolute;
    left: -.5rem /* 8/16 */;
    top: -1rem /* 16/16 */
  }

  .davav_p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .color1 {
    color: #3BD5FD;
  }

  .color2 {
    color: #80FABA;
  }

  .color3 {
    color: #2BF8E3;
  }
</style>
